<script setup lang="tsx">
import { ref, onMounted } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
import { AllUpload } from '@/components/AllUpload'
import { Upload } from '@/components/Upload'
import { getListApi, getModifyApi } from '@/api/settings'

defineOptions({
  name: 'MiniProgram'
})
const form = ref({ id: '', banner: '', name: '', logo: '' })
onMounted(() => {
  getListApidata()
})
const getListApidata = async () => {
  const res = await getListApi()
  form.value = res.data.config
  if (form.value.banner) {
    form.value.banner = form.value.banner.split(',')
  }
}
const onSubmit = async () => {
  const res = await getModifyApi({
    id: form.value.id,
    name: form.value.name,
    logo: form.value.logo,
    banner: form.value.banner.join(','),
    page: 0,
    limit: 0
  })
  if (res) {
    ElMessage.success(res.msg)
    getListApidata()
  }
}
</script>

<template>
  <ContentWrap title="商城配置">
    <ElForm :model="form" label-width="auto" style="max-width: 600px">
      <ElFormItem label="商城名称">
        <ElInput v-model="form.name" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="商城LOGO">
        <Upload v-model="form.logo" />
      </ElFormItem>
      <ElFormItem label="banner设置">
        <AllUpload v-model="form.banner" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="onSubmit">保存</ElButton>
      </ElFormItem>
    </ElForm>
  </ContentWrap>
</template>
